---
import '@styles/base.min.css'
import ToolBar from './ToolBar.astro'
---
<section class="header-wrapper">
    <header class="header" id="mainLogo">
        <div class="header-title">
            <h1 class="title">Cafe Blogs</h1>
            <p class="desc">
                <span class="tag">代码</span>、<span class="tag">游戏</span>、以及<span class="tag">有趣的故事</span>
            </p>
        </div>
        <nav class="link-navs flexbox">
            <a class="nav-link" href="/">首页</a>
            <a class="nav-link" href="/archieve/">归档</a>
            <a class="nav-link" href="/notes/1">随笔</a>
            <a class="nav-link" href="/about">关于</a>
        </nav>
    </header>
    <ToolBar />
</section>

<style lang="scss">
    .header-wrapper {
        width: 100%;
        transition: var(--baseTran);
        .header {
            display: flex;
            justify-content: space-between;
        }
        .header-title {
            transition: var(--baseTran);
            .title {
                font-family: var(--baseFont);
                font-size: var(--fontsTitle);
                line-height: 1.4;
                color: var(--textColor1);
            }
            .desc {
                font-family: var(--baseFont);
                font-size: var(--fontsBase);
                line-height: 1.4;
                color: var(--textColor2);
                .tag:hover {
                    color: var(--mainColor);
                }
            }
        }
        .link-navs {
            transition: var(--baseTran);
            .nav-link {
                width: 80px;
                height: 40px;
                font-family: var(--baseFont);
                font-size: var(--fontsBase);
                text-align: center;
                color: var(--textColor3);
                border-bottom: 2px solid transparent;
                transition: var(--baseTran);
                &:hover {
                    color: var(--mainColor);
                    border-bottom: 2px solid var(--mainColor);
                }
            }
        }
    }

    @media screen and (max-width: 640px) {
        .header-wrapper {
            height: auto;
            .header {
                flex-wrap: wrap;
            }
            .header-title {
                width: 100%;
                text-align: center;
                .desc {
                    font-size: var(--fontsSM);
                }
            }
            .link-navs {
                margin-top: 20px;
                width: 100%;
            }
        }
    }
</style>